<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 400px;
            height: 500px;
            background: #000;
            margin: 50px auto;
            position: relative;
            display: flex;
            overflow: hidden;
            justify-content: center;
        }

        .plane {
            width: 80px;
            height: 60px;
            background: url(img/plane.png) no-repeat 0 / 100% 100%;
            position: absolute;
            bottom: 10px;
        }


        .enemy {
            width: 60px;
            height: 40px;
            background: url(img/plane.png) no-repeat 0 / 100% 100%;
            position: absolute;
            top: 0px;
        }

        .bullet {
            width: 8px;
            height: 15px;
            background: gold;
            position: absolute;
            border-radius: 50% 50% 0 0;
            box-shadow: 0px 5px 3px #fff;
        }
    </style>
</head>

<body>
    <h1>按回车开始</h1>
    <h1 style="text-align:center" id="score">0</h1>
    <div class="container">
        <div class="plane"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="simba.js"></script>
    <script>
       
        // 分数
        var score = 0
        // 生成子弹的频率
        var create_bullet_interval = 300
        // 敌机飞行定时器的ID
        var enemy_fly_interval = null
        // 敌机生成定时器的ID
        var create_enemy_interval = null
        // 子弹飞行定时器的ID
        var bullet_fly_interval = null
        //游戏状态
        var isPlaying = false
        //游戏状态
        var check_collision_interval = null

        //设置时间控制子弹生成频率
        var endTime = new Date()
        //按J生成子弹
        var shoot = () => {
            if (new Date() - endTime < create_bullet_interval) return false;
            var bullet = $("<div/>").addClass("bullet") //document.createElement(div)
            $(".container").append(bullet)
            bullet.css({
                top: $(".plane").position().top - 10,
                left: $(".plane").position().left + $(".plane").innerWidth() / 2 - bullet.innerWidth() / 2
            })
            endTime = new Date()
        }

        //创建子弹飞行定时器
        function bullet_fly_fn() {
            bullet_fly_interval = setInterval(() => {
                $(".bullet").each(function (i, item) {
                    var y = $(this).position().top - 10
                    $(this).css("top", y)
                    if (y < 0) $(this).remove()
                })
            }, 50)
        }

        //创建用于敌机生成的定时器
        function create_enemy_fn() {
            create_enemy_interval = setInterval(() => {
                var enemy = $("<div/>").addClass("enemy")
                $(".container").append(enemy)
                enemy.css({
                    left: Math.rnd($(".container").innerWidth() - enemy.innerWidth())
                })
            }, 1000)
        }

        //创建敌机飞行定时器
        function enemy_fly_fn() {
            enemy_fly_interval = setInterval(() => {
                $(".enemy").each(function (i, item) {
                    var y = $(this).position().top + 5
                    $(this).css("top", y)
                    if (y > $(".container").innerHeight()) $(this).remove()
                })
            }, 50)
        }

        //开始，打开所有定时器
        function start() {
            isPlaying = true
            bullet_fly_fn()
            enemy_fly_fn()
            create_enemy_fn()
            check_collision_fn()
        }

        //暂停，停止所有定时器
        function stop() {
            isPlaying = false
            clearInterval(create_enemy_interval)
            clearInterval(enemy_fly_interval)
            clearInterval(bullet_fly_interval)
            clearInterval(check_collision_interval)
        }

        //切换开始和结束
        var changeState = () => {
            if (isPlaying) stop()
            else start()
        }

        //不停地检测是否有碰撞
        var check_collision_fn = function () {
            check_collision_interval = setInterval(() => {

                $(".enemy").each(function (i, enemy) {
                    $(".bullet").each(function (j, bullet) {
                        if (_.checkDOMCollision(enemy, bullet) || _.checkDOMCollision(
                                bullet, enemy)) {
                            enemy.remove()
                            bullet.remove()
                            score += 10
                            $("#score").text(score)
                        }
                    })

                    var plane = $(".plane").get(0) //将JQ对象转成JS对象
                    // $(element)//将JS对象转成JQ对象

                    //撞到我了
                    if (_.checkDOMCollision(enemy, plane) || _.checkDOMCollision(
                            plane, enemy)) {
                        stop()
                        alert("游戏结束")
                        //重载页面
                        location.reload()
                    }

                })


            }, 40)
        }


        //监听键盘事件控制操作
        $(window).keydown((e) => {
            //回车键开始/暂停
            if (e.keyCode === 13) changeState()

            //如果游戏没开始，就忽略按键
            if (!isPlaying) return false

            // console.log(e.keyCode)
            var left = $(".plane").position().left
            var top = $(".plane").position().top
            switch (e.keyCode) {
                case 87:
                    top -= 10
                    break;
                case 83:
                    top += 10
                    break;
                case 65:
                    left -= 10
                    break;
                case 68:
                    left += 10
                    break;
                case 74:
                    shoot()
                    break;

            }

            var maxLeft = $(".container").innerWidth() - $(".plane").innerWidth()
            var maxTop = $(".container").innerHeight() - $(".plane").innerHeight()
            var position = _.calcPostion(left, top, maxLeft, maxTop)

            $(".plane").css(position)




        })
    </script>
</body>

</html>